<template>
    <el-row class="login-container">
        <el-col :lg="16" :md="12" :xs="24" class="left">
            <div class="left-content">
                <div class="welcome-text">欢迎光临</div>
                <div class="logo-section">
                    <img :src="logoUrl" alt="logo" class="logo" width="100px">
                    <div class="system-name" v-html="formattedSystemName"></div>
                </div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" :xs="24" class="right">
            <h2 class="title">欢迎回来</h2>
            <div>
                <span class="line"></span>
                <span>账号密码登录</span>
                <span class="line"></span>
            </div>
            <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
                <el-form-item prop="telephone">
                    <el-input v-model="form.telephone" placeholder="请输入手机号">
                        <template #prefix>
                            <el-icon><user /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password>
                        <template #prefix>
                            <el-icon><lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit" :loading="loading">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script setup>
    // 脚本部分保持不变
    import { ref,reactive,onMounted,onBeforeUnmount,computed } from 'vue'
    import { toast } from '~/composables/util'
    import { useRouter } from "vue-router"
    import { useStore } from "vuex"
    import defaultLogo from '~/assets/logo.png'

    const logoUrl = computed(() => {
        const configUrl = store.state.config?.url
        return configUrl && configUrl !== '' ? configUrl : defaultLogo
    })

    const systemName = computed(() => {
        const configName = store.state.config?.topName
        return configName && configName !== '' ? configName : "救护消防应急救援中心微课系统"
    })

    const formattedSystemName = computed(() => {
        const name = systemName.value
        if (!name) return ''

        const chunkSize = 12
        const chunks = []

        for (let i = 0; i < name.length; i += chunkSize) {
            chunks.push(name.substring(i, i + chunkSize))
        }

        return chunks.join('<br>')
    })
    const router = useRouter()
    const store = useStore()
    const loading = ref(false)

    // do not use same name with ref
    const form = reactive({
        telephone: "",
        password: "",
        role: 4,
    })

    const rules = {
        telephone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        password:[
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur'
            },
        ],
    }

    const formRef = ref(null)

    const onSubmit = () => {
        formRef.value.validate((valid)=>{
            if(!valid){
                return false
            }
            loading.value = true
            store.dispatch("login",form).then(res=>{
                if(res.data.code === "200") {
                    toast("登录成功")
                    // 跳转到后台首页
                    router.push("/")
                } else if (res.data.code === "600") {
                    toast(res.data.msg, 'error')
                } else if (res.data.code === "401") {
                    toast(res.data.msg, 'warning')
                }
            }).finally(()=>{
                loading.value = false
            })
        })
    }

    // 监听回车事件
    function onKeyUp(e){
        if(e.key == "Enter") onSubmit()
    }

    // 添加键盘监听
    onMounted(()=>{
        document.addEventListener("keyup",onKeyUp)
    })
    // 移除键盘监听
    onBeforeUnmount(()=>{
        document.removeEventListener("keyup",onKeyUp)
    })

</script>

<style scoped>
    .login-container{
        @apply min-h-screen bg-indigo-500;
    }
    .login-container .left,.login-container .right{
        @apply flex items-center justify-center;
    }
    .logo-section {
        display: flex;
        align-items: center;
    }
    .logo {
        @apply bg-white mb-4;
        margin: 0 10px 0 0;
    }
    .login-container .right{
        @apply bg-light-50 flex-col;
    }
    .left>div>div{
        @apply font-bold text-5xl text-light-50 mb-4;
    }
    .right .title{
        @apply font-bold text-3xl text-gray-800;
    }
    .right>div{
        @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
    }
    .right .line{
        @apply h-[1px] w-16 bg-gray-200;
    }

    /* 手机端自适应样式 */
    @media (max-width: 768px) {
        .left-content {
            @apply text-center px-4;
        }

        .welcome-text{
            @apply font-bold text-3xl text-light-50 mb-6;
        }

        .logo-section {
            @apply flex items-center justify-center flex-col;
        }

        .logo {
            @apply bg-white mb-4;
            max-width: 60px;
            margin-right: 0 !important;
        }

        .system-name {
            @apply text-light-50 text-center;
        }
        .system-name div {
            @apply text-xl;
        }
    }
</style>
